<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="lib/validform/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/addaddress.css"/>
	</head>
	<body>
		<div class="edit-container">
			<div class="edit-header">
				<div class="edit-header-la"><img src="./img/confirm_img/confirm_10.png" ></div>
				<div class="edit-header-c"><span>添加地址</span></div>
			</div>	
			<form action="/api/address/add" method="post" class="form">

			<div class="edit-content">
				<li>
					<div class="edit-content-l" style="padding-right: 11.47vw;"><span>收货人:</span></div>
					<div class="edit-content-r-input"><input type="text" name="name" id="" value="" placeholder="请输入收货人姓名" datatype='*2-15' errormsg='请正确输入收货人姓名!' /></div>
				</li>
				<li>
					<div class="edit-content-l"><span>手机号码:</span></div>
					<div class="edit-content-r-input"><input type="text" name="tel" id="" value="" placeholder="请输入收货人手机号" datatype='m' errormsg='请正确输入手机号!' /></div>
				</li>
				<li>
					<div class="edit-content-l"><span>所在地区:</span></div>
					<div class="edit-content-r-select">
						<div><select name="province" isvalid="yes" required checkexpession='isZero' class="province">
							<option value ="" selected="selected">请选择</option>
						</select></div>
						<div><select name="city" isvalid="yes" required checkexpession='isZero' class="city">
							<option value ="" selected="selected">请选择</option>
						</select></div>
						<div><select name="county" isvalid="yes" required checkexpession='isZero' class="county">
							<option value ="" selected="selected">请选择</option>
						</select></div>
						<div><select name="town" isvalid="yes" required checkexpession='isZero' class="town">
							<option value ="" selected="selected">请选择</option>
						</select></div>
					</div>
				</li>
				<li>
					<div class="edit-content-l"><span>详细地址:</span></div>
					<div class="edit-content-r-textarea"><textarea rows="3" cols="30" placeholder="门牌,楼层等" datatype='*' errormsg='请正确输入详细地址!' ></textarea></div>
				</li>
				<li>
					<div class="edit-content-l"><span>邮政编码:</span></div>
					<div class="edit-content-r-input"><input type="text" name="code" id="" value="" placeholder="请输入邮政编码" datatype='p' errormsg='请正确输入邮政编码!' /></div>
				</li>
				<li style="justify-content: space-between;">
					<div class="edit-content-l" style="padding-right: 11.47vw;"><span>默认地址:</span></div>
					<div class="edit-content-r-checkbox unchecked" name='isDefault'></div>
				</li>
				
				
				<button class="save-edit-btn" type="submit">添加</button>
			</div>
			
			</form>
			
			
		</div>
		
		<script src="./lib/jquery/jquery-3.6.0.min.js"></script>
		<script src="lib/validform/js/Validform_v5.3.2_min.js"></script>
		<script src="lib/layer/layer.js"></script>
<!-- <script src="lib/PCASClass-省市区三级联动/PCASClass.js"></script> -->
		<!-- 全局配置ajax -->
		<script src="js/ajax-config.js"></script>
				<script src="js/addaddress.js"></script>
		<script>
		$('.form').Validform({
			tiptype:4,
			ajaxPost:true,
			callback:function(res){
				if(res.status){
					//登录成功
					layer.msg(res.msg);
					//跳转页面
					location.assign('./receiveraddress.html')
				} else{
					//登陆失败
					layer.msg(res.msg)
				}
			}
		})
		$province=$('.province');
		$city=$('.city');
		$county=$('.county');
		$town=$('.town');
			$province.change(function(){
				var id=$(this).find('option:selected').data('id');
				$.getJSON('/api/pcct/city',{id:id},function(res){
					if(res.status){
						var html='';
					res.data.forEach(function(item,index){
						html+=`<option value ="" data-id='${item.city_id}'>${item.name}</option>`
					})	
					$('.city').html(html)
					}
				})
				console.log($(this).county_id)
			})
			$city.change(function(){
						var id=$(this).find('option:selected').data('id');
						$.getJSON('/api/pcct/county',{id:id},function(res){
							if(res.status){
								var html='';
							res.data.forEach(function(item,index){
								html+=`<option value ="" data-id='${item.county_id}'>${item.name}</option>`
							})	
							$('.county').html(html)
							}
						})
						
					})
			$county.change(function(){
				var id=$(this).find('option:selected').data('id');
				$.getJSON('/api/pcct/town',{id:id},function(res){
					if(res.status){
						var html='';
					res.data.forEach(function(item,index){
						html+=`<option value ="" data-id='${item.town_id}'>${item.name}</option>`
					})	
					$('.town').html(html)
					}
				})
			})
					$.getJSON('/api/pcct/province',function(res){
						if(res.status){
							var html='';
						res.data.forEach(function(item,index){
							html+=`<option value ="" data-id='${item.province_id}'>${item.name}</option>`
						})	
						$('.province').html(html)
						}
					
					})
		</script>
		
	</body>
</html>
